import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-lesson3-two',
  templateUrl: './lesson3-two.component.html',
  styleUrls: ['./lesson3-two.component.scss']
})
export class Lesson3TwoComponent implements OnInit {
  items = ['测试一', '测试二', '测试三', '测试四', '测试五'];

  htmlCode = `<ion-list>
  <ng-container *virtualItem="items; let item; let k = key">
    <ion-item *diyIf="k !== 2">{{k + 1}}、{{item}}</ion-item>
  </ng-container>
</ion-list>`;

tsCode1 = `import { Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core';

@Directive({
  selector: '[diyIf]'
})
export class DiyIfDirective {
  @Input()
  set diyIf(newCondition: boolean) {
    if (newCondition) {
      this.vcr.createEmbeddedView(this.tpl);
    } else {
      this.vcr.clear();
    }
  }
  constructor(private vcr: ViewContainerRef, private tpl: TemplateRef<any>) { }

}
`;
tsCode = `import { Directive, Input, OnInit, ViewContainerRef, TemplateRef } from '@angular/core';

@Directive({
  selector: '[virtualItem]'
})
export class VirtualItemDirective implements OnInit {
  @Input()
  set virtualItem(list: any) {
    list.forEach((element, key) => {
      this.vcr.createEmbeddedView(this.tpl, {
        $implicit: element,
        key
      });
    });
  }
  constructor(private vcr: ViewContainerRef, private tpl: TemplateRef<any>) { }
  ngOnInit(): void {
  }
}

  `;
  constructor() { }

  ngOnInit() {
  }

}
